<template>
  <div>
    <el-form
        :rules="rules"
        ref="ruleF"
        :model="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
    >
      <el-form-item label="景点名" prop="name" >
        <el-input v-model="ruleForm.name" placeholder="请输入景点的名称" style="width: 500px;"></el-input>
      </el-form-item>
      <el-form-item label="摘要" prop="summary" >
        <el-input type="textarea" rows="4" v-model="ruleForm.summary" placeholder="请输入图片的描述" style="width: 500px;"></el-input>
      </el-form-item>
      <el-form-item label="景点图"  >
        <el-upload
            ref="upload"
            action=""
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-change="UploadImage"
            :limit="1"
            :file-list="fileList"
            :auto-upload="false"
        >
          <i class="el-icon-plus"></i>
          <template #tip>
            <div style="font-size: 12px;color: #919191;">
              单次限制上传一张图片
            </div>
          </template>
        </el-upload>
        <el-dialog v-model="dialogVisible" style="line-height: 0;">
          <img style="width: 100%;height: 100%"  :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleF')">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>

export default {
  name: "UploadImage",
 
  data() {
    return {
      fileList:[],
      dialogImageUrl: '',
      dialogVisible: false,
      //hideUploadEdit: false, //是否隐藏上传按钮
      ruleForm: {
        name:'',
        image:'',
        summary:'',
        issue:'',
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur',
          },
        ],
        summary: [
          {
            required: true,
            message: '请输入简介',
            trigger: 'blur',
          },
        ]
      },
 
    };
  },
  methods: {
 
 
    //上传图片的方法
    UploadImage(file,filelist) {
      //console.log(file);
      let fd = new FormData()
      fd.append('file', file.raw) //传给后台接收的名字 file
      this.$axios.post('/upload/image', fd, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {
        //上传成功后返回的数据,
        console.log("上传图片到:"+response.data);
        // 将图片地址给到表单.
        this.ruleForm.image=response.data
      })
 
    },
    //移除图片功能
    handleRemove(file, fileList) {
      console.log(file, fileList)
 
    },
    //预览图片功能
    handlePictureCardPreview(file) {
      console.log(file.url);
      this.dialogVisible = true
      this.dialogImageUrl = file.url
 
    },
    //添加景点功能
    submitForm(formName) {
 
      let ruleForm =this.ruleForm
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/api/attraction-add',ruleForm).then(resp=>{
            console.log(resp.data);
            if (resp.data.code==200){
              ElMessage.success(resp.data.msg)
              this.resetForm(formName)
              this.$router.push("attractions-list")
            }
          })
 
        } else {
          ElMessage.error("不能为空!")
          return false
        }
      })
    },
    //提交后重置上传界面表单
    resetForm(formName) {
      this.$refs.upload.clearFiles()
      this.$refs[formName].resetFields()
    },
 
 
  },
}
</script>
 
<style scoped>
.hide >>> .el-upload--picture-card {
  display: none;
}
</style>